<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章类别</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <!-- 引入模板引擎js文件 -->
    <script src="./libs/template-web.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            文章类别管理
        </div>
        <div class="container-fluid common_con">
            <table class="table table-striped table-bordered table-hover mp20 category_table">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>Slug</th>
                        <th class="text-center" width="100">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>奇趣事</td>
                        <td>funny</td>
                        <td class="text-center">
                            <a href="javascript:void(0)" data-toggle="modal" class=" btn btn-info btn-xs">编辑</a>
                            <a href="javascript:void(0)" class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3" class="text-center">
                            <a href="javascript:void(0)" class="btn btn-success" id="xinzengfenlei" data-toggle="modal"
                                data-target="#myModal">新增分类</a>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <!-- bootstrap的模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">New message</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <!-- 隐藏域: 是用来保存 编辑的文章类别的 id的 -->
                        <input type="hidden" name="id" id="categoryId">
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">分类名称:</label>
                            <input type="text" name="name" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">分类别名:</label>
                            <input name="slug" class="form-control" id="message-text"></input>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnCancel" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" id="btnAddOrEdit" class="btn btn-primary">Send message</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 准备一个模板 -->
    <!-- 补充:可以给模板引擎中遍历出来的项取一个别名 -->
    <script id="category_temp" type="text/html">
        {{each data v}}
        <tr>
            <td>{{v.name}}</td>
            <td>{{v.slug}}</td>
            <td class="text-center">
                <a href="javascript:void(0)" data-id="{{v.id}}" data-toggle="modal" data-target="#myModal"
                    class=" btn btn-info btn-xs">编辑</a>
                <a href="javascript:void(0)" data-id="{{v.id}}" class="btn btn-danger btn-xs btn-delete">删除</a>
            </td>
        </tr>
        {{/each}}
    </script>


    <script src="./libs/http.js"></script>
    <script>
        //入口函数
        $(function () {
            //一:一进到这个文章类别页面,就要显示所有的文章类别
            //1.1. 发送ajax请求,获取到所有的文章类别
            function getData() {
                $.ajax({
                    type: 'get',
                    url: BigNew.category_list,
                    success: function (backData) {
                        //console.log(backData);
                        if (backData.code == 200) {
                            //1.2  通过模板引擎的方式,渲染到页面上. 
                            var resHtml = template('category_temp', backData);
                            $('tbody').html(resHtml);
                        }
                    }
                });
            }
            getData();

            //二:到底是新增分类按钮 /编辑按钮 来弹出的模态框. 
            //show.bs.modal	这个事件是在模态框显示的时候立即触发的。
            //如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
            //给模态框注册事件
            $('#myModal').on('show.bs.modal', function (e) {
                //console.log(e.relatedTarget); //通过这个就能知道是谁弹出的模态框
                //判断
                if (e.relatedTarget === $('#xinzengfenlei')[0]) {
                    //点击新增分类弹出的
                    $('#myModalLabel').text('新增分类');
                    $('#btnAddOrEdit').text('新增').addClass('btn-primary').removeClass('btn-success');
                } else {
                    //'点击编辑按钮弹出的
                    $('#myModalLabel').text('编辑分类');
                    $('#btnAddOrEdit').text('编辑').addClass('btn-success').removeClass('btn-primary');


                    //编辑的第一步: 
                    //把需要编辑的当前这一行的文章类别  名称和别名 显示在模态框中. 
                    $('#recipient-name').val($(e.relatedTarget).parent().prev().prev().text().trim());
                    $('#message-text').val($(e.relatedTarget).parent().prev().text().trim());
                    $('#categoryId').val($(e.relatedTarget).attr('data-id'));
                }
            })



            //三:给模态框中的 新增/编辑 按钮设置点击事件
            $('#btnAddOrEdit').on('click', function () {
                //判断是点的新增,还是点的编辑: 用类或者用text都可以.
                if ($(this).hasClass('btn-primary')) {
                    //新增
                    //alert('点的是新增');
                    //获取用户输入的新增的 分类名称和分类别名. 
                    var categoryName = $('#recipient-name').val().trim(); //分类名称
                    var categorySlug = $('#message-text').val().trim(); //分类别名
                    //非空判断.自己去做
                    //发送ajax请求,完成新增
                    $.ajax({
                        type: 'post',
                        url: BigNew.category_add,
                        data: {
                            name: categoryName,
                            slug: categorySlug
                        },
                        success: function (backData) {
                            if (backData.code == 201) {
                                alert('新增成功!');
                                //更新页面中的数据
                                getData();
                                //隐藏模态框
                                $('#myModal').modal('hide');
                                //清空模态框中的输入的内容
                                $('#recipient-name').val("");
                                $('#message-text').val("");
                            }
                        }
                    });

                } else {
                    //编辑
                    //alert('点的是编辑');
                    //编辑的第二步: 
                    //1.获取 要编辑的 文章类别 的名称和别名.
                    // var categoryName = $('#recipient-name').val().trim(); //文章分类 名称
                    // var categorySlug = $('#message-text').val().trim(); //文章分类 别名
                    // var categoryId = $('#categoryId').val().trim(); //文章分类 id

                    //上面这三句话是获取form表单中的数据. 
                    //那如果上面不是三句话,而是三十句话,那按照上面这种写法来获取.那就会很累人啊.
                    //如果不想要那么累,那我们就想到了formData,
                    //因为formData可以一次性全部获取form表单中拥有name属性的标签的值. 
                    //但是有个问题,formData需要后端支持才行. 
                    //那此时 我们这个文章类别编辑的接口,后端并没有告诉我们可以使用formData. 
                    //那怎么办? 那难道只能一行一行的去获取.累死人吗?
                    //jQuery很贴心, jQuery就为我们提供了一个serialize()方法. 
                    //这个方法也是可以一次性的获取form表单中带有name属性的标签的值的. 
                    var data =  $('#myModal form').serialize();
                    //console.log(data); //id=8&name=爱一庭666&slug=庭庭庭666
                    //return;
                    
                    
                    //2.发送ajax请求完成编辑
                    $.ajax({
                        type: 'post',
                        url: BigNew.category_edit,
                        // data: {
                        //     id: categoryId,
                        //     name: categoryName,
                        //     slug: categorySlug
                        // },
                        //传递的数据参数,是jQuery使用他的serialize()方法帮我们获取到的数据. 
                        data:data,
                        success: function (backData) {
                            //console.log(backData);
                            if (backData.code == 200) {
                                alert('编辑成功!');
                                //3.编辑成功后要重新加载数据
                                getData();
                                // 隐藏模态框 
                                $('#myModal').modal('hide')
                            }
                        }
                    });

                }
            })


            //四: 删除文章类别
            //给删除按钮设置点击事件(删除按钮们是动态生成的,所以要委托注册)
            $('tbody').on('click', '.btn-delete', function () {
                var that = $(this); //把当前点击的这个删除按钮用that保存一下
                if (confirm('你确定要删除吗?')) {
                    //获取当前删除的这个文章类别的id
                    var categoryId = $(this).attr('data-id');
                    //发送ajax请求完成删除
                    $.ajax({
                        type:'post',
                        url:BigNew.category_delete,
                        data:{
                            id:categoryId
                        },
                        success:function(backData){
                            //console.log(backData);
                            if(backData.code == 204){
                                alert('删除成功!');
                                //更新数据
                                //第一种方法: 直接重新加载数据
                                //getData();
                                //第二种方式: 直接把这一行删掉
                                that.parent().parent().remove();
                            }
                        }
                    });
                }
            })

            //五: 给模态框中的 取消按钮设置一个点击事件. 
            $('#btnCancel').on('click',function(){
                //把模态框中的 form表单给清空.
                //form表单有一个方法 reset()就可以把form表单中的数据还原成默认值;
                $('#myModal form')[0].reset(); //注意: reset()方法是dom方法
            })


        })
    </script>


</body>

</html>